<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <script>
        var num = (new Date()).getTime();
        document.write('<link rel="stylesheet" type="text/css" href="css/index.css?v='+num+'"/>');
        document.write('<link rel="stylesheet" type="text/css" href="css/phone.css?v='+num+'"/>');
        document.write("<script type='text/javascript' src='js/index.js?v="+num+"'><\/script>");
    </script>
    <div id="app" style="width:100%;overflow-x:hidden">
        <div class="head">
            <div class="img"></div>
            <div class="button">
                <div class='btn btn1'>首页</div>
                <div class='btn btn2'>App简介</div>
                <div class='btn btn3'>关于我们</div>
            </div>
        </div>
        <div class="shouye">
            <div class="jiefang">
                <div class="img"></div>
                <div class="title1">遇见好邻居 结识好朋友</div>
                <div class="title2"><span>美好街坊App基于真实社区</span><br> 实现邻里情感互联、生活科技物联，是一款致力于为邻里街坊提供线上互动互助、物业和生活服务的实名制社交平台。</div>
                <div class="ma">
                    <img src="./images/二维码1.png" alt="">
                    <img src="./images/二维码2.png" alt="">
                </div>
                <div class="text">
                    <div>美好街坊APP下载</div>
                    <div>微信服务平台</div>
                </div>
                <div class="shui">
                    <img src="./images/Scroll Down.png" alt="">
                </div>
            </div>
            <div class="tese">
                <div class="title1">遇见好邻居 结识好朋友</div>
                <div class="title2">产品特色</div>
                <img src="./images/Blue Blur.png" alt="" class="blur blur1">
                <img src="./images/Green Blur.png" alt="" class="blur blur2">
                <div class="images">
                    <div class="item">
                        <img src="./images/邻里社交.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images/积分换购.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images/物业服务.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images/社区活动.png" alt="">
                    </div>
                    <div class="item">
                        <img src="./images/便民生活.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="app">
            <div class="life">
                <div class="bg">
                    <div class="title1">遇见好邻居 结识好朋友</div>
                    <div class="title2">发现生活，分享小区新鲜事...</div>
                    <div class="title3">通过“社区生活”，找到同小区及附近的邻居，发现邻居们的新鲜事，找到附近志同道合的人。</div>
                    <img src="./images/z7.png" alt="" class="im im1">
                    <img src="./images/f7.png" alt="" class="im im2">
                </div>
                <div class="images">
                    <div>
                        <div class="title1">生活</div>
                        <div class="title2">Life</div>
                        <img src="./images/生活.png" alt="">
                    </div>
                    <div>
                        <div class="title1">美食</div>
                        <div class="title2">Delicious Food</div>
                        <img src="./images/美食.png" alt="">
                    </div>
                    <div>
                        <div class="title1">家居</div>
                        <div class="title2">Home Furnishing</div>
                        <img src="./images/家居.png" alt="">
                    </div>
                    <div>
                        <div class="title1">职场</div>
                        <div class="title2">Workplace</div>
                        <img src="./images/首页.png" alt="" class="last">
                    </div>
                </div>
                <img src="./images/Green Blur 2.png" alt="" class="blur">
            </div>
            <div class="shequ">
                <img src="./images/介绍手机1.png" alt="" class="shouji">
                <img src="./images/元素.png" alt="" class="hua">
                <img src="./images/Green Blur 4.png" alt="" class="blur">
                <img src="./images/对话框1.png" alt="" class="p dh1">
                <img src="./images/对话框2.png" alt="" class="p dh2">
                <img src="./images/z7.png" alt="" class="im im1">
                <img src="./images/f7.png" alt="" class="im im2">
                <div class="title title1">遇见好邻居 结识好朋友</div>
                <div class="title title2">邻里市集，社区温暖又便利...</div>
                <div class="title title3">出远门狗狗无人照顾，闲置物品低价出售……在美好街坊App发帖，感受远亲不如近邻的温暖。</div>
            </div>
            <div class="xiaoqu">
                <img src="./images/介绍手机2.png" alt="" class="shouji">
                <img src="./images/编组 12.png" alt="" class="hua">
                <img src="./images/Green Blur 5.png" alt="" class="blur">
                <img src="./images/对话框3.png" alt="" class="p dh3">
                <img src="./images/对话框4.png" alt="" class="p dh4">
                <img src="./images/对话框5.png" alt="" class="p dh5">
                <img src="./images/z7.png" alt="" class="im im1">
                <img src="./images/f7.png" alt="" class="im im2">
                <div class="title title1">遇见好邻居 结识好朋友</div>
                <div class="title title2">小区活动，一起玩更有趣...</div>
                <div class="title title3">发起“社区活动”，找到邻居一起下棋、打球、户外郊游，找到共同兴趣爱好。</div>
            </div>
            <div class="fuwu">
                <div class="city">
                    <div class="title1">遇见好邻居 结识好朋友</div>
                    <div class="title2">社区服务，社区生活更便捷</div>
                </div>
                <div class="title3">生活缴费、家电维修、家政保洁、生活团购 再也不用到处找，美好街坊App都能解决。</div>
            </div>
        </div>
        <div class="we">
            <div class="title1">遇见好邻居 结识好朋友</div>
            <div class="title2">关于我们</div>
            <div class="btnimg">
                <img src="./images/编组4.png" alt="" class='btnimg1'>
                <img src="./images/编组5.png" alt="" class='btnimg2'>
                <img src="./images/编组6.png" alt="" class='btnimg3'>
            </div>
            <div class="box box1">
                <div class="title1">公司简介</div>
                <div class="title2">Company Profile</div>
                <hr>
                <div class="cont">
                    <img src="./images/lou.png" alt="">
                    <p>和家生活科技集团是愿景集团旗下一家以提供本地生活运营与城市综合服务运营为主的城市生活服务商。</p>
                    <p>愿景和家与政府结成命运共同体，为城市居住区及周边的资产提供物业管理、社区治理、便民服务、商业运营、市政服务、智慧社区等多种美好生活服务。</p>
                    <p>目前，已在北京、天津、河北、内蒙古、宁夏、山西、贵州、广州、四川等全国十八个省市自治区、28个城市，与多地政府达成共识，共计签约面积上亿平方米。</p>
                    <p>愿景和家是政府的好帮手，以“有问题，找和家”的服务理念，扎根基层社区，全力协助党和政府做好社区工作，以“坚持做难而正确的事”为方针，坚守初心，担当使命，为居民的美好生活而不断努力，致力成为行业的开拓者、运营者、引领者。</p> 
                </div>
            </div>
            <div class="box box2">
                <div class="title1">服务内容</div>
                <div class="title2">Service Content</div>
                <hr>
                <div class="cont">
                    <p>美好街坊APP——遇见好邻居，结识好朋友</p>
                    <P>美好街坊APP是基于真实社区为邻里街坊提供线上互动互助、物业和生活服务的实名制社交平台，致力于建设社区和睦相处的人文情感联系，建设以家为主体的共享型社区，实现邻里情感互联、生活科技物联，为居民构建一个温暖的社区。</P>
                    <P>【发现邻居，分享小区新鲜事】</P>
                    <P>通过“我的邻居”，找到同小区及附近的邻居，发现身边邻居们的新鲜事，找到附近志同道合的人。</P>
                    <P>【邻里互助，让社区更温暖】 </P>
                    <P>加班来不及接孩子？出远门狗狗无人照顾？上下班路途太远想找顺风车？在美好街坊APP“社区互助”中，向你的邻居们发起求助，邻居纷纷伸出援手。</P>
                    <p>【小区活动，一起玩更有趣】</p>
                    <p>通过发起“社区活动”，找到身边邻居一起下棋、打球、户外郊游，线上报名、线下约见，活动行程更加便利。</p>
                    <p>【聊天交友，我和邻居的交流空间】</p>
                    <p>通过“聊天交友”与邻居分享育儿经、交流养宠物话题、分享生活酸甜苦辣，邻里独有的聊天空间，距离近了，心也近了。</p> 
                </div>
            </div>
            <div class="box box3">
                <div class="title1">联系我们</div>
                <div class="title2">Contact Us</div>
                <hr>
                <div class="cont">
                    <img src="./images/位图.png" alt="" class="weitu">
                    <p>联系我们</p>
                    <p>公司地址：北京市朝阳区保利国际广场T2，13F</p>
                    <p>联系电话：010-87498500</p>
                    <p>电子邮箱：hjshwx1@chinavisionary.com</p>
                    <p>企业合作微信：mhjfapp</p>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="cont">友情链接：
                <a href="https://bj.lianjia.com/" target="_blank">链家</a>
                <a href="https://www.chinavisionary.com/" target="_blank">愿景明德</a>
                <a href="http://www.hogoliving.com/" target="_blank">和家生活</a>
                <a href="https://bj.ke.com/" target="_blank">贝壳</a>
                <a href="http://www.ziroom.com/" target="_blank">自如</a>
            </div>
        </div>
    </div>
    <script>
        var doc = document.documentElement || document.body
        if (doc.clientWidth <= 500) {
            $('.weitu').attr('src','./images/位图3.png')
        }
        $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');// 这行是 Opera 的补丁, 少了它 Opera 是直接用跳的而且画面闪烁 by willin
        $('.btn1').click(function(){
            $('.btn1').css({'color':'#fff','border-bottom':'2px solid #fff'})
            $('.btn2').css({'color':'#ccc','border':'none'})
            $('.btn3').css({'color':'#ccc','border':'none'})
            $body.animate({scrollTop: 0}, 1000);
        })
        $('.btn2').click(function(){
            $('.btn2').css({'color':'#fff','border-bottom':'2px solid #fff'})
            $('.btn1').css({'color':'#ccc','border':'none'})
            $('.btn3').css({'color':'#ccc','border':'none'})
            t = $('.shouye').height() + 1
            $body.animate({scrollTop: t}, 1000);
        })
        $('.btn3').click(function(){
            $('.btn3').css({'color':'#fff','border-bottom':'2px solid #fff'})
            $('.btn1').css({'color':'#ccc','border':'none'})
            $('.btn2').css({'color':'#ccc','border':'none'})
            t = $('.shouye').height() + $('.app').height()
            $body.animate({scrollTop: t}, 1000);
        })
        $('.btnimg1').click(function() {
            if ($('.box1').css('display') === 'block') {
                $('.box1').css('display','none')
            } else {
                $('.box1').css('display','block')
                $('.box2').css('display','none')
                $('.box3').css('display','none')
                $body.animate({scrollTop: $('.btnimg').offset().top}, 100);
            }   
        })
        $('.btnimg2').click(function() {
            if ($('.box2').css('display') === 'block') {
                $('.box2').css('display','none')
            } else {
                $('.box1').css('display','none')
                $('.box2').css('display','block')
                $('.box3').css('display','none')
                $body.animate({scrollTop: $('.btnimg').offset().top}, 100);
            } 
        })
        $('.btnimg3').click(function() {
            if ($('.box3').css('display') === 'block') {
                $('.box3').css('display','none')
            } else {
                $('.box1').css('display','none')
                $('.box2').css('display','none')
                $('.box3').css('display','block')
                $body.animate({scrollTop: $('.btnimg').offset().top}, 100);
            }  
        })
        $('.dh1').fadeOut();
        $('.dh2').fadeOut();
        $('.dh3').fadeOut();
        $('.dh4').fadeOut();
        $('.dh5').fadeOut();
        $(document).scroll(function() {
            var scroH = $(document).scrollTop()
            var h1  = $('.shouye').height() + $('.life').height()
            var h2 = h1 + $('.shequ').height()
            var h3 = h2 + $('.xiaoqu').height()
            var h4 = $('.shouye').height() + ($('.life').height() / 2)
            if (doc.clientWidth <= 500) {
                if(scroH >= h4 && scroH < h1) {
                    $('.dh1').fadeIn(500,()=> {
                        $('.dh2').fadeIn(500);
                    }); 
                }
            } else {
                if(scroH >= h1 && scroH < h2) {
                    $('.dh1').fadeIn(500,()=> {
                        $('.dh2').fadeIn(500);
                    }); 
                }
            }
            if(scroH >= h2 && scroH < h3) {
                $('.dh5').fadeIn(500,()=> {
                    $('.dh4').fadeIn(500, ()=> {
                        $('.dh3').fadeIn(500);
                    });
                });
            }
        })
    </script>
</body>
</html>